<template>
	<swiper class="page-icon">
		<swiper-slide v-for="(page,index) of pages" :key="index">
			<ul>
				<li v-for="item of page" :key="item.id"><div class="icons"><img :src="item.imgUrl" :alt="item.desc"></div><p>{{item.desc}}</p></li>
			</ul>
		</swiper-slide>
		
	</swiper>
</template>
<script>
	export default {
		name: 'HomeIcons',
		props: {
			list: Array
		},
		computed: {
			pages () {
				const pages = []
				//对iconList循环，接收循环项和下标两个参数
				this.list.forEach((item,index) => {
					const page = Math.floor(index / 8)
					if (!pages[page]) {
						pages[page] = []
					}
					pages[page].push(item)
				})
				return pages
			}
		}
	}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.page-icon {
	height: 0;
	padding-bottom: 50%;
	padding-top: px2rem(20px);
	font-size: 0;
	background: #fff;
	border-bottom: px2rem(1px) solid #f3f3f3;
	li {
		width: 25%;
		height: 0;
		padding-bottom: 25%;
		display: inline-block;
		text-align: center;
		font-size: 14px;
		box-sizing: content-box;
		.icons {
			display: inline-block;
			width: 60%;
			height: 0;
			padding-bottom: 60%;
			img {
				width: 100%;
			}
		}
	}
}
</style>